<template>
  <div class="h100">
    <v-tree :params="dParams" api="depart.get_depart_count" ref="tree" :hiddenNum="true">
      <div slot="content" slot-scope="dataR">
        <div class="listbox total">
          <v-list :dataR="dataR" ref="list" :cols="tableList.cols">
            <template slot="search">
              <el-date-picker
                v-model="dateVal"
                class="w250 verticalB"
                size="small"
                type="daterange"
                align="right"
                unlink-panels
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="pickerOptions"
                @change="setDate"
              ></el-date-picker>
              <el-select
                size="small"
                placeholder="版本"
                class="w120 fr"
                v-model="dParams.version"
                :disabled="!$api.purview('order.get_all_goods_price_version')"
              >
                <el-option
                  v-for="(val, inx) in config.goods_price_version"
                  :key="inx"
                  :label="val.name"
                  :value="val.key"
                ></el-option>
              </el-select>
            </template>
            <template slot="head">
              <thead>
                <th>项目</th>
                <th colspan="4">产品</th>
                <th>产品组件</th>
                <th>总数</th>
                <th>新建数</th>
                <th>删除数</th>
                <th>金额</th>
                <th>总金额</th>
              </thead>
            </template>
            <template slot="item" slot-scope="props">
              <!-- ECS开始 -->
              <tr class="hasRow">
                <td rowspan="11">{{ props.item.name }}</td>
                <td rowspan="2">ECS</td>
                <td>总数</td>
                <td>新建数</td>
                <td>删除数</td>
                <td>CPU</td>
                <td class="font-org">{{ props.item.aliyun_ecs_count_cpu_total }} 核</td>
                <td class="font-org">{{ props.item.aliyun_ecs_count_cpu_new_total }} 核</td>
                <td class="font-org">{{ props.item.aliyun_ecs_count_cpu_del_total }} 核</td>
                <td
                  rowspan="2"
                  class="font-org"
                >{{ props.item.aliyun_ecs_count_amount_total.toFixed(3) | thousandSeparate }} 元</td>
                <td class="font-red" rowspan="11">{{ props.item.total_amount | thousandSeparate }} 元</td>
              </tr>
              <tr>
                <td class="font-org">{{ props.item.aliyun_ecs_count_num_total }}</td>
                <td class="font-org">{{ props.item.aliyun_ecs_count_num_new_total }}</td>
                <td class="font-org">{{ props.item.aliyun_ecs_count_num_del_total }}</td>
                <td>内存</td>
                <td class="font-org">{{ props.item.aliyun_ecs_count_memory_total }} G</td>
                <td class="font-org">{{ props.item.aliyun_ecs_count_memory_new_total }} G</td>
                <td class="font-org">{{ props.item.aliyun_ecs_count_memory_del_total }} G</td>
              </tr>
              <!-- ECS结束 -->
              <!-- RDS开始 -->
              <tr>
                <td rowspan="3">RDS</td>
                <td>总数</td>
                <td>新建数</td>
                <td>删除数</td>
                <td>CPU</td>
                <td class="font-org">{{ props.item.aliyun_rds_count_cpu_total }} 核</td>
                <td class="font-org">{{ props.item.aliyun_rds_count_cpu_new_total }} 核</td>
                <td class="font-org">{{ props.item.aliyun_rds_count_cpu_del_total }} 核</td>
                <td
                  rowspan="3"
                  class="font-org"
                >{{ props.item.aliyun_rds_count_amount_total.toFixed(3) | thousandSeparate }} 元</td>
              </tr>
              <tr>
                <td class="font-org" rowspan="2">{{ props.item.aliyun_rds_count_num_total }}</td>
                <td class="font-org" rowspan="2">{{ props.item.aliyun_rds_count_num_new_total }}</td>
                <td class="font-org" rowspan="2">{{ props.item.aliyun_rds_count_num_del_total }}</td>
                <td>内存</td>
                <td class="font-org">{{ props.item.aliyun_rds_count_memory_total }} G</td>
                <td class="font-org">{{ props.item.aliyun_rds_count_memory_new_total }} G</td>
                <td class="font-org">{{ props.item.aliyun_rds_count_memory_del_total }} G</td>
              </tr>
              <tr>
                <td>存储</td>
                <td class="font-org">{{ props.item.aliyun_rds_count_disk_total }} G</td>
                <td class="font-org">{{ props.item.aliyun_rds_count_disk_new_total }} G</td>
                <td class="font-org">{{ props.item.aliyun_rds_count_disk_del_total }} G</td>
              </tr>
              <!-- RDS结束 -->
              <!-- OSS开始 -->
              <tr>
                <td rowspan="2">OSS</td>
                <td>总数</td>
                <td>新建数</td>
                <td>删除数</td>
                <td rowspan="2">存储</td>
                <td class="font-org" rowspan="2">{{ props.item.aliyun_oss_count_disk_total }} G</td>
                <td class="font-org" rowspan="2">{{ props.item.aliyun_oss_count_disk_new_total }} G</td>
                <td class="font-org" rowspan="2">{{ props.item.aliyun_oss_count_disk_del_total }} G</td>
                <td
                  rowspan="2"
                  class="font-org"
                >{{ props.item.aliyun_oss_count_amount_total.toFixed(3) | thousandSeparate }} 元</td>
              </tr>
              <tr>
                <td class="font-org">{{ props.item.aliyun_oss_count_num_total }}</td>
                <td class="font-org">{{ props.item.aliyun_oss_count_num_new_total }}</td>
                <td class="font-org">{{ props.item.aliyun_oss_count_num_del_total }}</td>
              </tr>
              <!-- OSS结束 -->
              <!-- SLB开始 -->
              <tr>
                <td rowspan="2">SLB</td>
                <td>总数</td>
                <td>新建数</td>
                <td>删除数</td>
                <td rowspan="2">-</td>
                <td rowspan="2">-</td>
                <td rowspan="2">-</td>
                <td rowspan="2">-</td>
                <td
                  rowspan="2"
                  class="font-org"
                >{{ props.item.aliyun_slb_count_amount_total.toFixed(3) | thousandSeparate }} 元</td>
              </tr>
              <tr>
                <td class="font-org">{{ props.item.aliyun_slb_count_num_total }}</td>
                <td class="font-org">{{ props.item.aliyun_slb_count_num_new_total }}</td>
                <td class="font-org">{{ props.item.aliyun_slb_count_num_del_total }}</td>
              </tr>
              <!-- SLB结束 -->
              <!-- REDIS开始 -->
              <tr>
                <td rowspan="2">REDIS</td>
                <td>总数</td>
                <td>新建数</td>
                <td>删除数</td>
                <td rowspan="2">存储</td>
                <td class="font-org" rowspan="2">{{ props.item.aliyun_redis_count_disk_total }} G</td>
                <td
                  class="font-org"
                  rowspan="2"
                >{{ props.item.aliyun_redis_count_disk_new_total }} G</td>
                <td
                  class="font-org"
                  rowspan="2"
                >{{ props.item.aliyun_redis_count_disk_del_total }} G</td>
                <td
                  rowspan="2"
                  class="font-org"
                >{{ props.item.aliyun_redis_count_amount_total.toFixed(3) | thousandSeparate }} 元</td>
              </tr>
              <tr>
                <td class="font-org">{{ props.item.aliyun_redis_count_num_total }}</td>
                <td class="font-org">{{ props.item.aliyun_redis_count_num_new_total }}</td>
                <td class="font-org">{{ props.item.aliyun_redis_count_num_del_total }}</td>
              </tr>
              <!-- REDIS结束 -->
            </template>
          </v-list>
        </div>
      </div>
    </v-tree>
  </div>
</template>

<script>
import { cacheConfig } from "@cache";
export default {
  data() {
    return {
      dParams: {
        order_by: "",
        version: "",
        start: "",
        end: ""
      },
      tableList: {
        cols: "100"
      },
      config: {},
      dateVal: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "默认",
            onClick(picker) {
              picker.$emit("pick", ["", ""]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  methods: {
    setDate(date) {
      this.dParams.start = date[0];
      this.dParams.end = date[1];
    },

    getList(val) {
      this.order_type = val;
    }
  },
  mounted() {
    this.config = cacheConfig.load();
    this.dParams.version = this.config.goods_price_version[0].key;
    this.dParams.order_by = "total_amount";
  }
};
</script>

<style lang="scss" scoped>
table.table {
  tr {
    background-color: #fff !important;
    &:nth-child(22n),
    &:nth-child(22n - 1),
    &:nth-child(22n - 2),
    &:nth-child(22n - 3),
    &:nth-child(22n - 4),
    &:nth-child(22n - 5),
    &:nth-child(22n - 6),
    &:nth-child(22n - 7),
    &:nth-child(22n - 8),
    &:nth-child(22n - 9),
    &:nth-child(22n - 10) {
      td {
        background-color: #fafafa;
      }
    }
  }
  th {
    text-align: center;
    border-right: 1px solid #fff;
  }
  td {
    padding: 10px;
    border-left: 1px solid #efefef;
    text-align: center;
  }
}
</style>